<!DOCTYPE html>
<html class="x-admin-sm">
<head>
    <meta charset="UTF-8">
    <title>宿舍管理系统</title>
    <meta name="renderer" content="webkit">
    <meta name="csrf-token" content="{{ csrf_token() }}"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi"/>
    <link rel="stylesheet" href="{{asset('css/font.css')}}">
    <link rel="stylesheet" href="{{asset('css/xadmin.css')}}">
    <script src="{{asset('lib/layui/layui.js')}}" charset="utf-8"></script>
    <script type="text/javascript" src="{{asset('js/xadmin.js')}}"></script>
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="x-nav">
          <span class="layui-breadcrumb">
            <a href="/home">首页</a>
            <a>
              <cite>用户列表</cite></a>
          </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"
       onclick="location.reload()" title="刷新">
        <i class="layui-icon layui-icon-refresh" style="line-height:30px"></i></a>
</div>
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">
                <div class="layui-card-body ">
                    <form class="layui-form layui-col-space5">
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start"
                                   value="{{old('start')}}">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end"
                                   value="{{old('end')}}">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <input type="text" name="category-name" placeholder="请输入分类名" autocomplete="off"
                                   class="layui-input" value="{{old('category-name')}}">
                        </div>
                        <div class="layui-inline layui-show-xs-block">
                            <button class="layui-btn" lay-submit="" lay-filter="search"><i
                                        class="layui-icon">&#xe615;</i></button>
                        </div>
                    </form>
                </div>
                <div class="layui-card-body layui-table-body layui-table-main">
                    <table class="layui-hide" id="test" lay-filter="test"></table>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script>
    layui.use(['table', 'laydate', 'form'], function () {
        var laydate = layui.laydate;
        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });
        var table = layui.table;
        table.render({
            elem: '#test'
            , url: '/permission-categories'
            , toolbar: 'default'
            , title: '权限分类'
            , cols: [[
                {type: 'checkbox'}
                , {field: 'id', title: 'ID', width: 80, unresize: true, hide: true}
                , {field: 'name', title: '分类名', width: 120}
                , {field: 'permissions_count', title: '所属权限数', width: 100}
                , {field: 'description', title: '描述', width: 120}
                , {field: 'created_at', title: '创建时间', width: 150, sort: true}
                , {field: 'updated_at', title: '更新时间', width: 150, sort: true}
                // , {fixed: 'right',title: '操作', width:120, align:'center', toolbar: '#barDemo'}
            ]]
            , page: true
            ,limit:20,limits:[20,40,80,160,320,640,1280]
        });

        let form = layui.form;
        form.on('submit(search)', function (data) {
            console.log(data.field);
            table.reload('test', {
                url: '/permission-categories'
                , where: data.field
            });
            return false;
        });

        //监听头工具栏事件
        table.on('toolbar(test)', function(obj){
            let checkStatus = table.checkStatus(obj.config.id);
            let data = checkStatus.data; //获取选中的数据
            switch(obj.event){
                case 'add':
                    xadmin.open('添加权限','{{route('permission-categories.create')}}')
                    break;
                case 'update':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else if(data.length > 1){
                        layer.msg('只能同时编辑一个');
                    } else {
                        xadmin.open('更新权限',`/permission-categories/${data[0].id}/edit`);
                    }
                    break;
                case 'delete':
                    if(data.length === 0){
                        layer.msg('请选择一行');
                    } else {
                        layer.confirm('确认要删除吗？', function (index) {
                            //发异步删除数据
                            data.forEach(t=>{
                                del_one(null, t.id);
                            });
                            layer.close(index);
                            table.reload('test',{});
                        });
                    }
                    break;
            };
        });
    });
    function del_one(obj, id) {
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });
        $.ajax({
            url: 'permission-categories/' + id,
            type: 'DELETE',
            dataType: "json",
            statusCode: {
                401: function() {
                    console.log("statusCode 401 called");
                    window.location.reload();
                },
                449: function() {
                    console.log("statusCode 449 called");
                }
            },
            success: function () {
                layer.msg(`已删除${id}!`, {icon: 1, time: 1000});
                if (obj) {
                    $(obj).parents("tr").remove();
                }
            },
            error: function (err) {
                layer.msg('删除失败', {icon: 2, time: 1000});
            }
        });
    }

</script>
</html>